<template>
  <div id="hotnew">
    <div class="nav">
      <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" class="banner" />
    <van-dropdown-menu :overlay="false">
      <van-dropdown-item title="综合" />
      <van-dropdown-item title="价格" />
      <van-dropdown-item title="分类" />
    </van-dropdown-menu>

    <ul class="tab-list">
      <li class="tab-item" v-for="item in info" :key="item.id">
        <img :src="item.list_pic_url" />
        <p class="item-title">{{item.name}}</p>
        <p class="item-price">￥ {{item.retail_price}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { hotnewlist } from "@/api/home/hotnew";
export default {
  data() {
    return {
      info: {},
      value: "",
      obj: {
        isNew: "",
        isHot: "",
        order: "",
      },
      title: "",
    };
  },
  created() {
    if (this.$route.query.isNew == 1) {
      this.obj.isNew = 1;
      this.obj.isHot = "";
      this.title = "新品首发";
    } else if (this.$route.query.isHot == 1) {
      this.obj.isNew = "";
      this.obj.isHot = 1;
      this.title = "人气推荐 好物精选";
    }
    hotnewlist(this.obj).then((res) => {
      this.info = res.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
#hotnew {
  background-color: rgb(244, 244, 244);
}
.nav {
  position: fixed;
  width: 375px;
  top: 0;
  left: 0;
  z-index: 99;
}
.banner {
  margin-top: 45px;
  display: block;
  width: 375px;
  height: 140px;
}
.tab-list {
  width: 375px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 8px;
  .tab-item {
    width: 185px;
    padding: 10px 17px 0;
    margin-bottom: 4px;
    box-sizing: border-box;
    background-color: #fff;
    img {
      width: 151px;
      height: 151px;
      margin-bottom: 8px;
    }
    .item-title {
      width: 151px;
      margin-bottom: 16px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item-price {
      width: 151px;
      margin-bottom: 18px;
      font-size: 15px;
      color: rgb(180, 40, 45);
      text-align: center;
    }
  }
}
</style>